<!--
 * @Descripttion: 
 * @version: 
 * @Author: wjh
 * @Date: 2022-02-16 17:57:32
 * @LastEditors: wjh
 * @LastEditTime: 2022-03-15 23:41:59
-->
<template>

  <el-form 
    v-bind="$attrs" 
    v-on="$listeners" 
    :model="data"
    ref="form"
    @submit.native.prevent><!--在输入框中按下回车就是提交该表单，且会刷新页面。@submit.native.prevent阻止这一默认行为-->

    <el-form-item 
      v-for="(item,index) in items" 
      :key="index"
      v-bind="getFormItemBind(item)"
      v-on="getFormItemOn(item)">

      <template v-if="$scopedSlots[item.prop]">
        <slot 
          :name='item.prop' 
          :item='item' 
          :data="data" />
      </template><!--作用是啥-->
      
      <EItem 
        v-else
        :item="item" 
        v-model="data[item.prop]"
        v-on="getItemOn(item)"/>

    </el-form-item>
    
    <!-- 拓展插槽，适合添加查询新增按钮 -->
    <slot
      :items="items" 
      :data="data" />

  </el-form>
</template>
<script>
import * as _ from 'lodash'
let isObject = data => Object.prototype.toString.call(data) === '[object Object]'//？？？？？？判断是否为对象
let isFunction = data => Object.prototype.toString.call(data) === '[object Function]'//判断是否为方法
export default{
  props:{
    value:{type:Object,require:false},
    items:{type:Array,require:false},
  },
  data(){
    return{
      rule:{},//？？？
      defFormItemBind(item){
        return {
          ...item,
          label: item?.label ? item?.label+'：' : '',
        }
      },
    }
  },
  computed:{
    data:{
      get(){
        return this.value
      },
      set(value){
        this.$emit('input',value)
      }
    }
  },
  methods:{
    //----------普通方法-----------
    resetFields(){
      this.$refs.form.resetFields()//
    },
    clearValidate(){
      this.$refs.form.clearValidate()//
    },
    validate(callback){
      this.$refs.form.validate(callback)//没有看到调用他们
    },

    getFormItemBind(item){
      let defBind = this.defFormItemBind(item),//获取label
        bind = isObject(item.formItemBind)//判断formItemBind是否为对象，没有就给{}，暂时都没用上
          ? item.formItemBind
          : {};
      return _.merge(defBind, bind);//？？？？？？_.merge
    },
    getFormItemOn(item){
      return isObject(item.formItemOn) 
            ? item.formItemOn 
            : isFunction(item.formItemOn)
              ? item.formItemOn(item, this.value)
              : {} 
    },
    getItemOn(item){
      return isObject(item.itemOn) 
            ? item.itemOn 
            : isFunction(item.itemOn)
              ? item.itemOn(item, this.value)
              : {} 
    }

    //----------点击事件-----------

    //----------接口方法-----------
  }
}
</script>
<style lang="scss">
</style>